<template>
	<scroller class="scroller">
		<div append="tree" class="emoj_box" v-if="!imgs">
			<block v-for="(item,index) in emojiList" :key="index">
				<text @click="setEmoj(item,index)" class="emoj_box_img">{{item}}</text>
			</block>
		</div>
        <div append="tree" class="emoj_box" v-if="imgs">
        	<block v-for="(item,index) in biaoList" :key="index">
        		<image @click="handleEmotionbiaoFalse(item)" style="margin: 5rpx; width: 110rpx;height: 110rpx;" :src="`http://de-a.nextapi.cc`+item"></image>
        	</block>
        </div>
	</scroller>
</template>

<script>
	export default {
		props: {
			emojiList: {
				type: Array,
				default: []
			},
            biaoList:{
                type:Array,
                default:[]
            },
            imgs:{
                default:false
            }
		},
		data() {
			return {}
		},
		methods:{
            handleEmotionbiaoFalse(item){
                this.$nextTick(() => {
                    console.log('打印表情包',item)
                    this.$emit('handleEmotionbiaoFalse',`http://de-a.nextapi.cc`+item)
                })
            },
			setEmoj(item,index){
				this.$nextTick(() =>{
					this.$emit('setEmoj',item,index)
				})
			}
		}
	}
</script>

<style scoped>
	.scroller {
		flex: 1;
	}

	.emoj_box {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.emoj_box_img {
		font-size: 45rpx;
		width: 83rpx;
		height: 83rpx;
		text-align: center;
		line-height: 83rpx;
	}
</style>
